<template>
	<div>
		<!-- <div class="users-header">{{ curUserOption === 'modifi' ? '修改密码' : '找回密码' }}</div> -->
		<el-form v-show="isChackEmail" :model="ruleFormEmail" status-icon :rules="rulesEmail" ref="ruleFormEmail">
			<el-form-item label="用户名" prop="email">
				<el-input type="text" v-model="ruleFormEmail.email" autocomplete="off" placeholder="请输入注册邮箱"></el-input>
			</el-form-item>
			<el-form-item style="text-align: center;margin-top: 40px;">
				<el-button type="default" @click="signin">返回登录</el-button>
				<el-button type="primary" @click="nextStep('ruleFormEmail')">下一步</el-button>
			</el-form-item>
		</el-form>

		<el-form v-show="!isChackEmail" :model="ruleFormPass" status-icon :rules="rulesPass" ref="ruleFormPass">
			<el-form-item label="新密码" prop="password">
				<el-input type="password" v-model="ruleFormPass.password" autocomplete="off" placeholder="请输入新密码" show-password></el-input>
			</el-form-item>
			<el-form-item label="确认密码" prop="checkPass">
				<el-input type="password" v-model="ruleFormPass.checkPass" autocomplete="off" placeholder="请再次输入密码" show-password></el-input>
			</el-form-item>
			<el-form-item label="邮箱验证码" prop="inputCheckCode">
				<el-input type="text" v-model="ruleFormPass.inputCheckCode" autocomplete="off" placeholder="请输入发送至邮箱的验证码"></el-input>
			</el-form-item>
			<el-form-item style="text-align: center;margin-top: 40px;">
				<el-button type="default" @click="lastStep">上一步</el-button>
				<el-button type="primary" @click="confirmModifi('ruleFormPass')">确认修改</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			let validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/.test(value)) {
					callback(new Error('密码格式为(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)'));
				} else {
					callback();
				}
			};
			let validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleFormPass.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			let validCode = (rule, value, callback) => {
				if(value === ''){
					callback(new Error('请输入发送至邮箱的验证码'))
				} else if(value !== this.checkCode){
					callback(new Error('请输入正确的验证码!'));
				} else {
					callback()
				}
			};
			return {
				isChackEmail: true,
				curUserOption:"",
				checkCode:"",
				//验证邮箱
				ruleFormEmail: {
					email: ''
				},
				rulesEmail: {
					email: [{
							required: true,
							message: '请输入邮箱地址',
							trigger: 'blur'
						},
						{
							type: 'email',
							message: '请输入正确的邮箱地址',
							trigger: ['blur', 'change']
						}
					]
				},
				// 验证密码
				ruleFormPass: {
					password: '',
					checkPass: '',
					inputCheckCode:''
				},
				rulesPass: {
					password: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}],
					inputCheckCode: [{
						required: true,
						validator: validCode,
						trigger:'blur'
					}]
				}
			}
		},
		created() {
			this.curUserOption = this.$route.query.type
		},
		methods: {
			signin(){
				this.$router.push('/users/signin');
			},
			// 下一步验证邮箱
			nextStep(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						let chackEmailRes = await this.$network({
							api: "chackEmail",
							data: {
								email: this.ruleFormEmail.email
							}
						})
						if (chackEmailRes.status === 0) {
							// 发送验证码
							let sendEmailRes = await this.$network({
								api: "sendEmail",
								data: {
									recipient: this.ruleFormEmail.email,
									type:this.curUserOption
								}
							})
							if(sendEmailRes.status === 0){
								this.checkCode = sendEmailRes.checkCode;
								this.isChackEmail = false;
							}
						}
						if (chackEmailRes.status === 1) {
							this.$message({
								message: "请输入正确的邮箱",
								showClose: true,
								type: 'warning'
							})
						}
					} else {
						return false;
					}
				})
			},
			// 提交密码
			confirmModifi(formName) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
						let modifiPassRes = await this.$network({
							api:"modifiPass",
							data:{
								email:this.ruleFormEmail.email,
								password:this.ruleFormPass.password
							}
						})
						
						if(modifiPassRes.status === 0){
							this.$message({
								message: "修改成功，请重新登录",
								type: 'success',
								duration:2000
							})
							uni.clearStorageSync();
							setTimeout(()=>{
								this.$router.push("/users/signin");
							},2000)
						}
					} else {
						return false;
					}
				})
			},
			lastStep(){
				this.isChackEmail = true;
			}
		}
	}
</script>

<style lang="scss">
	.users-header {
		font-size: $uni-font-size-extra-large;
		padding-bottom: 20px;
		border-bottom: 1px dashed #ffffff;
	}
</style>
